<template>
    <el-menu :default-openeds="opens" style="min-height: 100%; overflow-x: hidden;"
        background-color="rgb(48,65,86)" text-color="#fff" active-text-color="#ffb04b" :collapse-transition="false"
        :collapse="isCollapse" router>
        <div style="height: 60px; line-height: 60px; text-align: center; color: #fff;">
            <img src="../assets/logo.png" style="width: 20px; position: relative; top: 4px;" alt="">
            <b v-show="logoTextShow" style="margin-left: 5px;">专业排课管理系统</b>
        </div>
        <div v-for="item in menus" :key="item.id">
            <div v-if="item.path">
                <el-menu-item :index="item.path">
                    <!-- <template slot="title"> -->
                        <i :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    <!-- </template> -->
                </el-menu-item>
            </div>
            <div v-else>
                <el-submenu :index="item.id + ''" style="max-width: 200px">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    </template>
                    <div v-for="subItem in item.children" :key="subItem.id">
                        <el-menu-item :index="subItem.path">
                            <i :class="subItem.icon"></i>
                            <span>{{ subItem.name }}</span>
                        </el-menu-item>
                    </div>
                </el-submenu>
            </div>
        </div>
        <!-- 这里来个空的标签占据一下位置，解决菜单收起时宽度变小 -->
        <el-submenu style="width:200px; opacity: 0; visibility: hidden;">
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: "Aside",
        props: {
            isCollapse: Boolean,
            logoTextShow: Boolean,
        },
        data() {
            return {
                menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
                opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : [],
            }
        },
    }
</script>

<style scoped>
.el-menu--collapse span {
    visibility: hidden;
}
</style>